body { background: #000; color: white; font-family: Nunito, sans-serif; margin: 0; }
        .slider { width: 95%; margin: auto; overflow: hidden; position: relative; margin-top: 10px; }
        .slider ul { display: flex; padding: 0; width: 400%; animation: cambio 20s infinite alternate linear; }
        .slider li { width: 100%; list-style: none; position: relative; }
        .slider img { width: 100%; }
        @keyframes cambio { 
            0%, 20% { margin-left: 0; } 
            25%, 45% { margin-left: -100%; } 
            50%, 70% { margin-left: -200%; } 
            75%, 100% { margin-left: -300%; } 
        }
        .navbar { position: fixed; bottom: 0; width: 100%; background: #000; display: flex; justify-content: space-around; padding: 10px 0; z-index:10000}
        .navbar a { color: white; text-align: center; flex: 1; text-decoration: none; } /* Asegura que no haya subrayado en los enlaces de la navbar */
        .navbar a i { display: block; font-size: 1.5em; }
        .navbar a span { display: block; font-size: 0.8em; }
        .navbar a:hover { background: #ffffff; } /* Color de fondo al pasar el mouse */
        .menu-toggle { position: fixed; bottom: 70px; right: 10px; font-size: 1.5em; cursor: pointer; background: white; border-radius: 30%; padding: 15px; color: black; }
        .menu-toggle i { font-size: 1.8em; color: black; }
        .menu { display: none; position: fixed; bottom: 140px; right: 10px; background: #000000; width: 110px; padding: 10px; border-radius: 10px; max-height: 250px; overflow-y: auto; }
        .menu.show { display: block; }
        .menu a { display: block; padding: 10px 0; color: white; text-align: center; text-decoration: none; }
        .menu a:hover { background: #ffffff; } /* Color de fondo al pasar el mouse */
        .cards {display: grid; grid-template-columns: repeat(3, 1fr); /* 3 columnas de igual ancho */ 
                               gap: 10px; padding: 10px;}
        .card { position: relative; text-align: center; }
        .card img { width: 100%; border-radius: 5px; }
        .card .rating { position: absolute; top: 10px; left: 10px; background: rgba(255, 255, 255, 0.8); padding: 5px 10px; border-radius: 3px; color: black; font-size: 0.9em; }
        .card .year { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, 0.8); padding: 5px; border-radius: 3px; color: black; font-size: 0.9em; }
        .card span { display: block; margin-top: 5px; color: white; text-decoration: none; } /* Sin subrayado */
        .form__group { position: relative; padding: 15px 0 0; margin: 0 auto; margin-top: 10px; margin-bottom: 1rem; width: 90%; }
        .form__field { font-family: inherit; width: 100%; border: 0; border-bottom: 2px solid #9b9b9b; outline: 0; font-size: 1.3rem; color: #fff; padding: 7px 0; background: 0 0; transition: border-color .2s; }
        .form__field::placeholder { color: transparent; }
        .form__field:placeholder-shown~.form__label { font-size: 1.3rem; cursor: text; top: 20px; }
        .form__label { position: absolute; top: 0; display: block; transition: .2s; font-size: 1rem; color: #fff; }
        .form__field:focus { padding-bottom: 6px; font-weight: 700; border-width: 3px; border-image: linear-gradient(to right, red, #008cf7, red); border-image-slice: 1; }
        .form__field:focus~.form__label { position: absolute; top: 0; display: block; transition: .2s; font-size: 1rem; color: red; font-weight: 700; }
        .form__field:invalid, .form__field:required { box-shadow: none; }

        /* Asegura que los enlaces no tengan subrayado */
        a {
            text-decoration: none; /* Elimina el subrayado */
            color: white; /* Asegura que el texto de los enlaces sea blanco */
        }

        a:hover {
            color: #000000; /* Cambia el color cuando el mouse pasa por encima */
        }

        /* Estilo para los puntos de navegaciÃ³n */
        .menu-toggle i {
            color: black; /* Cambia el color de los tres puntos a negro */
        }